import 'package:flutter/material.dart';
import 'package:my_flutter_tool/modle/comment.dart';
import 'package:my_flutter_tool/widgets/app_button.dart';
import 'package:my_flutter_tool/widgets/app_img.dart';
import 'package:my_flutter_tool/widgets/app_list_tile.dart';

import 'package:provider/provider.dart';

///楼层
class CommentFloor extends StatelessWidget {
  const CommentFloor({
    Key key,
    this.index,
  }) : super(key: key);

  final int index;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {},
      onLongPress: () {},
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ///用户信息
            AppListTile(
              leading: Padding(
                padding: EdgeInsets.only(right: 10),
                child: ClipOval(
                  child: Container(
                    width: 34,
                    height: 34,
                    color: Colors.blue,
                    child: Selector(
                      selector: (BuildContext context, CommentModle comment) =>
                          comment.floorList[index].user.headUrl,
                      builder: (_, String headUrl, ___) => AppImg(url: headUrl),
                    ),
                  ),
                ),
              ),
              title: Row(
                children: [
                  Selector(
                    selector: (BuildContext context, CommentModle comment) =>
                        comment.floorList[index].user.name,
                    builder: (_, String name, ___) => Text(
                      '$name',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 12,
                        color: Colors.blueAccent,
                      ),
                    ),
                  ),
                  const SizedBox(width: 4),
                  Container(
                    padding:
                        const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
                    decoration: BoxDecoration(
                      color: Colors.purple,
                      borderRadius: BorderRadius.circular(2),
                    ),
                    child: const Text(
                      'LV4',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 8,
                        color: Colors.white,
                      ),
                    ),
                  ),
                  const SizedBox(width: 4),
                  Container(
                    padding:
                        const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
                    decoration: BoxDecoration(
                      color: Colors.brown,
                      borderRadius: BorderRadius.circular(2),
                    ),
                    child: const Text(
                      'Tag',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 8,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ],
              ),
              subTitle: Selector(
                selector: (BuildContext context, CommentModle comment) =>
                    comment.floorList[index].createTime,
                builder: (_, DateTime date, ___) => Text(
                  date.toString().split('.')[0],
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 10,
                    color: Colors.grey,
                    height: 1.6,
                  ),
                ),
              ),
              trailing: AppButton(
                color: Colors.white,
                onPressed: () {},
                text: '关注',
                icon: Icon(Icons.add, size: 16),
                width: 60,
                height: 30,
                style: TextStyle(
                  fontSize: 10,
                  color: Colors.grey,
                  height: 1,
                ),
              ),
            ),

            ///评论内容
            Padding(
              padding: const EdgeInsets.only(left: 44, top: 10),
              child: Selector(
                selector: (BuildContext context, CommentModle comment) =>
                    comment.floorList[index].content,
                builder: (_, String content, ___) => Text(
                  '$content',
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    fontWeight: FontWeight.w500,
                    fontSize: 12,
                    color: Colors.black54,
                  ),
                ),
              ),
            ),

            ///操作栏
            Padding(
              padding: const EdgeInsets.only(left: 44, top: 10),
              child: Row(
                children: [
                  AppButton(
                    height: 26,
                    padding: const EdgeInsets.symmetric(horizontal: 10),
                    color: Colors.white,
                    icon: const Icon(Icons.thumb_up, size: 16),
                    onPressed: () {},
                    text: '666',
                    style: TextStyle(
                      color: Colors.grey,
                      fontWeight: FontWeight.bold,
                      fontSize: 12,
                    ),
                  ),
                  const SizedBox(width: 5),
                  AppButton(
                    height: 26,
                    padding: const EdgeInsets.symmetric(horizontal: 10),
                    color: Colors.white,
                    icon: const Icon(Icons.thumb_down, size: 16),
                    onPressed: () {},
                    text: '',
                    iconSpece: 0,
                    style: TextStyle(
                      color: Colors.grey,
                      fontWeight: FontWeight.bold,
                      fontSize: 12,
                    ),
                  ),
                  const SizedBox(width: 5),
                  AppButton(
                    height: 26,
                    padding: const EdgeInsets.symmetric(horizontal: 10),
                    color: Colors.white,
                    icon: const Icon(Icons.share, size: 16),
                    onPressed: () {},
                    text: '',
                    iconSpece: 0,
                    style: TextStyle(
                      color: Colors.grey,
                      fontWeight: FontWeight.bold,
                      fontSize: 12,
                    ),
                  ),
                  const SizedBox(width: 5),
                  AppButton(
                    height: 26,
                    padding: const EdgeInsets.symmetric(horizontal: 10),
                    color: Colors.white,
                    icon: const Icon(Icons.mode_comment, size: 16),
                    onPressed: () {},
                    text: '',
                    iconSpece: 0,
                    style: TextStyle(
                      color: Colors.grey,
                      fontWeight: FontWeight.bold,
                      fontSize: 12,
                    ),
                  ),
                ],
              ),
            ),

            ///回复区
            Selector(
              selector: (_, CommentModle comment) =>
                  comment.floorList[index].replyList.length,
              builder: (_, l, __) {
                return l > 0
                    ? Padding(
                        padding: EdgeInsets.only(left: 44, top: 10),
                        child: Container(
                          width: double.infinity,
                          padding: const EdgeInsets.all(10),
                          decoration: BoxDecoration(
                            color: Colors.grey[200],
                            borderRadius: BorderRadius.circular(4),
                          ),
                          child: Selector(
                            selector: (_, CommentModle comment) =>
                                comment.floorList[index].replyList,
                            builder: (_, List<Reply> list, __) =>
                                ListView.separated(
                              physics: const NeverScrollableScrollPhysics(),
                              itemCount: list.length,
                              shrinkWrap: true,
                              itemBuilder: (_, i) => _buildReply(i),
                              separatorBuilder: (_, __) {
                                return const SizedBox(height: 4);
                              },
                            ),
                          ),
                        ),
                      )
                    : Container();
              },
            ),
          ],
        ),
      ),
    );
  }

  ///构建回复
  _buildReply(int i) {
    return Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: () {},
        child: Selector(
          selector: (_, CommentModle comment) =>
              comment.floorList[index].replyList[i],
          builder: (_, Reply reply, __) => RichText(
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
            text: TextSpan(
              text: '${reply.user.name}: ',
              style: TextStyle(
                color: Colors.blueAccent[200],
                fontWeight: FontWeight.w500,
                fontSize: 12,
              ),
              children: [
                TextSpan(
                  text: '${reply.content}',
                  style: TextStyle(color: Colors.grey),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
